var dataInt = {
    "data": [
        { "src": ".././images/ (1).jpg" },
        { "src": ".././images/ (2).jpg" },
        { "src": ".././images/ (3).jpg" },
        { "src": ".././images/ (4).jpg" },
        { "src": ".././images/ (5).jpg" },
        { "src": ".././images/ (6).jpg" },
        { "src": ".././images/ (7).jpg" },
        { "src": ".././images/ (8).jpg" },
        { "src": ".././images/ (9).jpg" },
        { "src": ".././images/ (10).jpg" },
        { "src": ".././images/ (11).jpg" },
        { "src": ".././images/ (12).jpg" },
        { "src": ".././images/ (13).jpg" },
        { "src": ".././images/ (14).jpg" },
    ]
}
window.onload = function() {
    waterfall('main', 'box');
    window.onscroll = setInterval(function() {
        if (checkScrollSlide()) {
            var oParent = document.getElementById('main');
            //将数据块渲染到页面底部
            for (var i in dataInt.data) {
                var obox = document.createElement('div');
                var opic = document.createElement('div');
                var oimg = document.createElement('img');
                obox.className = 'box';
                opic.className = 'pic';
                oimg.src = dataInt.data[i].src;
                opic.appendChild(oimg);
                obox.appendChild(opic);
                oParent.appendChild(obox);
            }
            waterfall('main', 'box');
        }
    }, 300)
}

function waterfall(parent, box) {
    //将main下所有class为box的元素取出来
    var oParent = document.getElementById(parent);
    var oBoxs = getByClass(oParent, box);
    var oBoxW = oBoxs[0].offsetWidth;
    var cols = Math.floor(document.documentElement.clientWidth / oBoxW);
    //设置main的宽
    oParent.style.cssText = 'width:' + oBoxW * cols + 'px;margin:0 auto';
    var hArr = []; //存放每一列高度的数组
    for (var i in oBoxs) {
        if (i < cols) {
            hArr.push(oBoxs[i].offsetHeight);
        } else {
            var minH = Math.min.apply(null, hArr);
            var index = getMinhIndex(hArr, minH);
            oBoxs[i].style.position = 'absolute';
            oBoxs[i].style.top = minH + 'px';
            oBoxs[i].style.left = oBoxW * index + 'px';
            hArr[index] += oBoxs[i].offsetHeight;
        }
    }
}
//根据class获取元素
function getByClass(parent, className) {
    var boxArr = []; //存储获取到所有class为box的元素
    oElements = document.getElementsByClassName(className);
    for (var i of oElements) {
        boxArr.push(i);
    }
    return boxArr;
}
//获得索引
function getMinhIndex(arr, val) {
    for (var i in arr) {
        if (arr[i] == val) {
            return i;
        }
    }
}

//检测是否具备了滚动加载的条件
function checkScrollSlide() {
    var oParent = document.getElementById(parent);
    var oBoxs = getByClass(oParent, 'box');
    //最后一个box一半的高度+距离顶部的高低
    var lastBoxH = oBoxs[oBoxs.length - 1].offsetTop + Math.floor(oBoxs[oBoxs.length - 1].offsetHeight / 2);
    //srcollTop的距离
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    var height = document.body.clientHeight || document.documentElement.clientHeight;
    if ((lastBoxH < (scrollTop + height))) {
        return 1;
    } else {
        return 0;
    }
}